
<template>
  <div class="container">
    <form class="mui-input-group">
      <div class="mui-input-row">
        <label>收件人 <span v-html="'\u00a0\u00a0\u00a0'"></span> </label>
        <input
          v-model="form.name"
          type="text"
          class="mui-input-clear"
          placeholder="请输入收件人姓名"
        />
      </div>
      <div class="center">
        <label>联系方式</label>
        <input
          v-model="form.tel"
          type="text"
          class="mui-input-clear"
          placeholder="请输入手机号"
        />
      </div>
      <div class="mui-input-row">
        <label>所在地区</label>
        <input
          type="text"
          v-model="form.area"
          class="mui-input-clear"
          placeholder="所在地区"
          @click="choose"
        />
        <div class="divwrap">
          <div class="mask" @click="choose" v-show="show"></div>
          <v-distpicker
            v-show="show"
            type="mobile"
            @province="onChangeProvince"
            @city="onChangeCity"
            @area="onChangeArea"
            :province="newInfo.province"
            :city="newInfo.city"
            :area="newInfo.district"
          >
          </v-distpicker>
        </div>
      </div>
      <div class="mui-input-row">
        <label>详细地址</label>
        <input
          v-model="form.detail"
          type="text"
          class="mui-input-clear"
          placeholder="请输入详细地址"
        />
      </div>
      <div class="width: 25%">
        <!-- <button
          
          type="button"
          class="mui-btn mui-btn-primary mui-btn-block"
          >确认</button> -->
          <router-link to="/address" size="small"
          @click="save" class="btn btn-primary width: 25%">确定</router-link>
      </div>
      <div class="mui-button-row">
        <button
          size="small"
          v-show="id"
          @click="del"
          type="button"
          class="mui-btn mui-btn-danger mui-btn-block"
          >删除</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: 'admin',
        tel: '18567259127',
        area: '河南省郑州市新郑市',
        detail: '文昌路一号'
      },
      show: false,
      newInfo: {
        province: '',
        city: '',
        area: ''
      }
    }
  },
  methods: {
    save () {
      window.console.log('确认')
    }
  },

}
</script>
